<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .red{background:red}
        .green{background:green}
    </style>
</head>
<body>
    <div id="hello">
        <h1>Vue入门</h1>
        <span>{{message}}</span>
        <table width="300px" border="1px">
            <tr><th>编号</th><th>书名</th><th>作者</th></tr>
            <tr v-for="book in books" v-bind:class="book.id%2==0?'red':'green'"  v-on:click="showBook(book)">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.author}}</td>
            </tr>
        </table>
        <form>
            <input type="text" v-model:value="mybook.id"><br>
            <input type="text" v-model:value="mybook.name"><br>
            <input type="text" v-model:value="mybook.author"><br>
            <input type="button" value="确定" v-on:click="submit()">
        </form>
    </div>
    <script >
        //创建vue对象
        var vue = new Vue({
            el:"#hello",                    //执行绑定的标签，在此标签下，vue都可以生效
            data:                           //data是数据绑定
                {   message:"Hello Vue!!!",
                    books:[{id:1,name:"三国演义",author:"罗贯中"},
                            {id:2,name:"红楼梦",author:"曹雪芹"},
                            {id:3,name:"水浒传",author:"施耐庵"},
                            {id:4,name:"西游记",author:"吴承恩"}],
                    mybook:{id:0,name:"未知",author:"某某"}
                },
            methods:{                       //定义事件方法
                showBook:function(book){
                    //将选中的书籍，显示到文本框中
                    this.mybook.id = book.id;
                    this.mybook.name = book.name;
                    this.mybook.author = book.author;
                },
                submit:function(){
                    alert("编号：" + this.mybook.id +",书名："+this.mybook.name+",作者："+this.mybook.author);
                }
            }
        });
    </script>
</body>
</html>